<template>
  <div>
    <div id="app"
      ><v-form-designer ref="form" :designer-config="designerConfig">
        <!-- 自定义按钮插槽演示 -->
        <template #customToolButtons>
          <a-button type="primary" preIcon="ion:save-outline" @click="handleSubmit">保存</a-button>
        </template>
      </v-form-designer></div
    >
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  const form = ref<any>(null);
  //配置设计器初始化界面显示设置
  const designerConfig = ref({
    formTemplates: false, // 隐藏表单模板
    externalLink: false, //是否显示GitHub、文档等外部链接
    languageMenu: false, //是否显示语言菜单
    importJsonButton: false, //是否显示导入JSON按钮
    exportJsonButton: true, //是否显示导出JSON器按钮
    exportCodeButton: false, //是否显示导出代码按钮
    generateSFCButton: false, //是否显示生成SFC按钮
    toolbarMaxWidth: 300, // 工具按钮栏最大宽度
    toolbarMinWidth: 200, //工具栏按钮最小宽度
  });

  // 测试
  const handleSubmit = () => {
    const formData = form.value.getFieldWidgets();
    console.log('表单数据:', formData);
  };
</script>

<style lang="less">
  #app svg {
    display: inline-block;
  }

  body {
    margin: 0;

    /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
  }
</style>
